<template>
  <view class="user-info-page">
    <view class="navbar">
      <view class="navbar-back" @click="navigateBack">
        <image src="/static/images/back-icon.png" mode="aspectFit"></image>
      </view>
      <view class="navbar-title">个人信息</view>
    </view>
    <view class="user-avatar">
      <view class="avatar-container">
        <image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image>
        <text class="change-avatar" @click="changeAvatar">修改头像</text>
      </view>
      <view class="user-name">
        <text>{{ userInfo.nickname }}</text>
        <image src="/static/images/edit-icon.png" mode="aspectFit" @click="editNickname"></image>
      </view>
    </view>
    <view class="user-info-list">
      <view class="info-item" @click="editGender">
        <text class="item-label">性别</text>
        <text class="item-value">{{ userInfo.gender }}</text>
        <image src="/static/images/arrow-right.png" mode="aspectFit"></image>
      </view>
      <view class="info-item" @click="editBirthday">
        <text class="item-label">生日</text>
        <text class="item-value">{{ userInfo.birthday }}</text>
        <image src="/static/images/arrow-right.png" mode="aspectFit"></image>
      </view>
      <view class="info-item" @click="editPhone">
        <text class="item-label">手机号码</text>
        <text class="item-value">{{ userInfo.phone }}</text>
        <image src="/static/images/arrow-right.png" mode="aspectFit"></image>
      </view>
      <view class="info-item" @click="editEmail">
        <text class="item-label">邮箱</text>
        <text class="item-value">{{ userInfo.email || '未设置' }}</text>
        <image src="/static/images/arrow-right.png" mode="aspectFit"></image>
      </view>
    </view>
    <button class="logout-btn" @click="logout">退出登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatarUrl: '/static/images/default-avatar.png',
        nickname: '张三',
        gender: '男',
        birthday: '1990-01-01',
        phone: '138****8000',
        email: 'zhangsan@example.com'
      }
    }
  },
  onLoad() {
    // 实际项目中应该从本地存储或API获取用户信息
    this.loadUserInfo();
  },
  methods: {
    navigateBack() {
      uni.navigateBack();
    },
    loadUserInfo() {
      // 加载用户信息
    },
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.userInfo.avatarUrl = res.tempFilePaths[0]
          // 在这里可以调用上传头像的API
        }
      })
    },
    editNickname() {
      uni.showModal({
        title: '修改昵称',
        editable: true,
        placeholderText: '请输入昵称',
        success: (res) => {
          if (res.confirm && res.content.trim()) {
            this.userInfo.nickname = res.content.trim();
            // 实际项目中应该调用API保存昵称
            this.saveNickname();
          }
        }
      });
    },
    editGender() {
      uni.showActionSheet({
        itemList: ['男', '女', '保密'],
        success: (res) => {
          const genders = ['男', '女', '保密'];
          this.userInfo.gender = genders[res.tapIndex];
          // 实际项目中应该调用API保存性别
          this.saveGender();
        }
      });
    },
    editBirthday() {
      uni.chooseDate({
        start: '1900-01-01',
        end: new Date().toISOString().split('T')[0],
        success: (res) => {
          this.userInfo.birthday = res.date;
          // 实际项目中应该调用API保存生日
          this.saveBirthday();
        }
      });
    },
    editPhone() {
      uni.navigateTo({
        url: '/pages/user/phone'
      });
    },
    editEmail() {
      uni.showModal({
        title: '修改邮箱',
        editable: true,
        placeholderText: '请输入邮箱',
        success: (res) => {
          if (res.confirm && res.content.trim()) {
            this.userInfo.email = res.content.trim();
            // 实际项目中应该调用API保存邮箱
            this.saveEmail();
          }
        }
      });
    },
    logout() {
      // 退出登录
      uni.showModal({
        title: '确认退出',
        content: '确定要退出当前账号吗？',
        success: (res) => {
          if (res.confirm) {
            // 实际项目中应该清除本地存储的用户信息
            uni.removeStorageSync('userInfo');
            uni.navigateBack();
          }
        }
      });
    },
    saveNickname() {
      // 保存昵称
    },
    saveGender() {
      // 保存性别
    },
    saveBirthday() {
      // 保存生日
    },
    saveEmail() {
      // 保存邮箱
    }
  }
}
</script>

<style>
.user-info-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.user-avatar {
  padding: 60rpx 0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar-container {
  position: relative;
  margin-bottom: 30rpx;
}

.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}

.change-avatar {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20rpx;
}

.user-name {
  display: flex;
  align-items: center;
}

.user-name text {
  font-size: 36rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

.user-name image {
  width: 32rpx;
  height: 32rpx;
}

.user-info-list {
  background-color: #fff;
  margin-bottom: 40rpx;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.info-item:last-child {
  border-bottom: none;
}

.item-label {
  width: 200rpx;
  font-size: 30rpx;
  color: #333;
}

.item-value {
  flex: 1;
  font-size: 30rpx;
  color: #666;
  text-align: right;
  margin-right: 20rpx;
}

.info-item image {
  width: 24rpx;
  height: 40rpx;
}

.logout-btn {
  width: 680rpx;
  height: 96rpx;
  line-height: 96rpx;
  text-align: center;
  background-color: #fff;
  color: #ff4500;
  border-radius: 48rpx;
  font-size: 32rpx;
  margin: 0 auto;
  border: 1rpx solid #ff4500;
}
</style>    